<!-- 表单的组件 -->
<template>
  <div class="form-table">
    <el-table
      :data="tableData"
      border
    >

      <el-table-column
        label="#"
        width="50"
      >
        <template slot-scope="scope">
          <div class="scope-index">
            <span>{{ scope.$index + 1 }}</span>
          </div>
          <div class="scope-action">
            <el-button type="danger" icon="el-icon-minus" size="mini" circle @click="handleRemove(scope.$index)" />
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.length==0" />
      <template v-else>
        <!-- 显示元素名称 -->

        <el-table-column
          v-for="(column) in columns"
          :key="column.key"
          :label="column.name"
        >
          <!-- <el-input></el-input> -->
          <template slot-scope="scope">
            <!-- 调用父组件生成具体表单 -->
            <GenerateElementItem v-model="scope.row[column.model]" :path="widget.model+'.' + scope.$index + '.'+column.model" :blanks="blanks" is-table="table" :widget="column" :models.sync="tableData[scope.$index]" :remote="remote">
              <template v-for="blank in blanks" v-slot:[blank.name]="blankScope">
                <slot :name="blank.name" :model="scope.row" />
              </template>
            </GenerateElementItem>

          </template>

        </el-table-column>
      </template>

    </el-table>
    <el-button icon="el-icon-plus" type="text" @click="handleAddRow">添加</el-button>
  </div>
</template>

<script>
export default {
  components: {
    GenerateElementItem: () => import('../GenerateElementItem.vue')
  },
  props: ['columns', 'value', 'models', 'remote', 'blanks'],
  data() {
    return {
      tableData: this.value,
      dataModels: this.models
    }
  },
  watch: {
    value(val) {
      this.tableData = val
    },
    tableData(val) {
      this.$emit('input', val)
    },
    dataModels: {
      deep: true,
      handler(val) {
        this.$emit('update:models', val)
      }
    },
    models: {
      deep: true,
      handler(val) {
        this.dataModels = val
      }
    }
  },
  created() {

  },
  methods: {

    handleAddRow() {
      const item = {}
      for (let i = 0; i < this.columns.length; i++) {
        if (this.columns[i].type === 'blank') {
          item[this.columns[i].model] = this.columns[i].options.defaultType === 'String' ? '' : (this.columns[i].options.defaultType == 'Object' ? {} : [])
        } else {
          item[this.columns[i].model] = this.columns[i].options.defaultValue
        }
      }

      this.tableData.push(item)
    },

    handleRemove(index) {
      // console.log(22222222);
      this.tableData.splice(index, 1)
    },
    handleFoc(ee) {
      // console.log(ee.currentTarget );
      // var delTarget = ee.currentTarget.nextElementSibling;
      //    delTarget.className = 'scope-index';
      // console.log(delTarget);
    }
  }
}
</script>

<style lang="scss">
    .form-table{
        .el-table__empty-block{
            display: none;
        }

        .scope-action{
            display: none;
        }

        .scope-index{
            display: block;
        }

        .hover-row{
            .scope-action{
                display: block;
                .el-button{
                    padding: 3px;
                }
            }

            .scope-index{
                display: none;
            }
        }
    }
</style>
